import React, { Component } from 'react'
import { connect } from 'react-redux'

import {
	Layout,
	Modal,
	Button,
	Table,
	InputNumber,
	Form,
	Input,
	Row,
	Col,
	Dropdown,
	Menu,
} from 'antd'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'
import './style.scss'
const { Header, Footer, Content } = Layout

class Applied extends Component {
	state = {
		isFinish: true,
		isCheck: false,
		checkModal: false,
		dbModal: false,
		apiModal: false,
		page: 10,
	}

	changePage = (value) => {
		this.setState({ page: value })
	}
	//切换审核和完成的表单
	changeState = () => {
		this.setState({
			isFinish: !this.state.isFinish,
			isCheck: !this.state.isCheck,
		})
	}
	//查看数据modal是否可见
	changeCheckState = () => {
		this.setState({ checkModal: !this.state.checkModal })
	}
	//接口访问modal是否可见;
	openModalState = (text, record) => {
		console.log(text)
		if (record.type === '数据库') {
			this.setState({ dbModal: !this.state.dbModal })
		} else if (record.type === '电子文件' || record.type === '接口') {
			this.setState({ apiModal: !this.state.apiModal })
		}
	}
	closeModalState = (str) => {
		if (str === 'db') {
			this.setState({ dbModal: !this.state.dbModal })
		} else if (str === 'api') {
			this.setState({ apiModal: !this.state.apiModal })
		}
	}
	render() {
		const column = [
			{
				align: 'center',
				title: '序号',
				dataIndex: 'number',
				key: 'number',
			},
			{
				align: 'center',
				title: '资源代码',
				dataIndex: 'code',
				key: 'code',
			},
			{
				align: 'center',
				title: '资源名称',
				dataIndex: 'name',
				render: (text, record) => {
					return <span className="active">{text}</span>
				},
			},
			{
				align: 'center',
				title: '资源提供方',
				dataIndex: 'provider',
				key: 'provider',
			},
			{
				align: 'center',
				title: '共享类型',
				dataIndex: 'share',
				key: 'share',
			},
			{
				align: 'center',
				title: '共享方式',
				dataIndex: 'method',
				key: 'method',
			},
			{
				align: 'center',
				title: '资源格式',
				dataIndex: 'type',
				key: 'type',
			},
			{
				align: 'center',
				title: '资源状态',
				dataIndex: 'status',
				key: 'status',
			},
			{
				align: 'center',
				title: '审批结果',
				dataIndex: 'result',
				key: 'result',
			},
			{
				align: 'center',
				title: '操作',
				key: 'operate',
				render: (text, record) => {
					return (
						<div>
							<span
								className="active"
								onClick={() => {
									this.openModalState(text, record)
								}}
							>
								接口访问&nbsp;
							</span>
							<span
								className="success"
								onClick={() => {
									this.changeCheckState()
								}}
							>
								查看数据
							</span>
						</div>
					)
				},
			},
		]
		const data = [
			{
				number: '1',
				code: '03388/001',
				name: '街道信息',
				provider: '市公安局',
				share: '无条件共享',
				method: '共享平台方式',
				type: '数据库',
				status: '正常',
				result: '已通过',
			},
			{
				number: '2',
				code: '03388/001',
				name: '街道信息',
				provider: '市公安局',
				share: '无条件共享',
				method: '共享平台方式',
				type: '电子文件',
				status: '正常',
				result: '已通过',
			},
			{
				number: '3',
				code: '03388/001',
				name: '街道信息',
				provider: '市公安局',
				share: '无条件共享',
				method: '共享平台方式',
				type: '接口',
				status: '正常',
				result: '已通过',
			},
		]
		const col1 = [
			{
				align: 'center',
				title: '名称',
				dataIndex: 'name',
				key: 'name',
			},
			{
				align: 'center',
				title: '身份证号',
				dataIndex: 'id',
				key: 'id',
			},
			{
				align: 'center',
				title: '地址',
				dataIndex: 'address',
				key: 'address',
			},
			{
				align: 'center',
				title: '电话',
				dataIndex: 'phone',
				key: 'phone',
			},
		]
		const data1 = [
			{
				name: 'geogre',
				id: '610125******',
				address: '西安',
				phone: '158296*****',
			},
			{
				name: 'geogre',
				id: '610125******',
				address: '西安',
				phone: '158296*****',
			},
			{
				name: 'geogre',
				id: '610125******',
				address: '西安',
				phone: '158296*****',
			},
			{
				name: 'geogre',
				id: '610125******',
				address: '西安',
				phone: '158296*****',
			},
		]
		const col2 = [
			{
				align: 'center',
				title: '名称',
				dataIndex: 'name',
				key: 'name',
			},
			{
				align: 'center',
				title: '类型',
				dataIndex: 'type',
				key: 'type',
			},
			{
				align: 'center',
				title: '是否必填',
				dataIndex: 'necessary',
				key: 'necessary',
			},
			{
				align: 'center',
				title: '描述',
				dataIndex: 'discribe',
				key: 'discribe',
			},
		]
		const data2 = [
			{
				name: '身份证',
				type: 'string',
				necessary: '是',
				discribe: '无',
			},
			{
				name: '名字',
				type: 'string',
				necessary: '是',
				discribe: '无',
			},
			{
				name: '住址',
				type: 'string',
				necessary: '是',
				discribe: '无',
			},
		]
		const menu1 = (
			<Menu>
				<Menu.Item key="1">name</Menu.Item>
				<Menu.Item key="2">id</Menu.Item>
				<Menu.Item key="3">type</Menu.Item>
			</Menu>
		)
		const menu2 = (
			<Menu>
				<Menu.Item key="1">大于</Menu.Item>
				<Menu.Item key="2">小于</Menu.Item>
				<Menu.Item key="3">等于</Menu.Item>
			</Menu>
		)
		const menu3 = (
			<Menu>
				<Menu.Item key="1">是</Menu.Item>
				<Menu.Item key="2">否</Menu.Item>
			</Menu>
		)
		const {
			isFinish,
			isCheck,
			checkModal,
			dbModal,
			apiModal,
			page,
		} = this.state
		return (
			<Content className="outer">
				<Layout className="container">
					<Header
						className="header"
						style={{ backgroundColor: 'transparent', padding: '0' }}
					>
						<span className="title">已申请资源</span>
					</Header>
					<Content className="content">
						<div className="nav">
							<Button
								type={isFinish ? 'primary' : ''}
								onClick={this.changeState}
							>
								已完成
							</Button>
							<Button
								type={isCheck ? 'primary' : ''}
								onClick={this.changeState}
							>
								审核中
							</Button>
						</div>
						<Table className="main-table" columns={column} dataSource={data} />
						<div className="footer">
							显示<InputNumber min={1} defaultValue={page} onChange={this.changePage}/>项结果，共{data.length}项
						</div>
						<Modal
							title="查看数据"
							visible={checkModal}
							onCancel={() => this.changeCheckState()}
							bodyStyle={{ backgroundColor: '#f0f2f5' }}
							onOk={() => this.changeCheckState()}
							destroyOnClose={true}
						>
							<Layout>
								<Content className="check-content">
									<div>
										<span>基本信息</span>
									</div>
									<Form
										labelCol={{ span: 6 }}
										wrapperCol={{ span: 12 }}
										colon={false}
									>
										<Row>
											<Col span={12}>
												<Form.Item label={<span>资源名称</span>}>
													<span>街道信息</span>
												</Form.Item>
											</Col>
											<Col span={12}>
												<Form.Item label={<span>提供方</span>}>
													<span>公安局</span>
												</Form.Item>
											</Col>
											<Button className="download">下载</Button>
										</Row>
									</Form>
									<div>
										<span>数据列表</span>
									</div>
									<Table columns={col1} dataSource={data1} />
								</Content>
							</Layout>
						</Modal>
						<Modal
							title="接口访问-数据库"
							visible={dbModal}
							onCancel={() => this.closeModalState('db')}
							bodyStyle={{ backgroundColor: '#f0f2f5', padding: '8px 24px' }}
							onOk={() => this.closeModalState('db')}
							destroyOnClose={true}
						>
							<Layout>
								<Content className="check-content">
									<div style={{ margin: '8px 0' }}>
										<Button>Json</Button>
										<Button>XML</Button>
									</div>
									<div>
										<span>基本信息</span>
									</div>
									<Form
										labelCol={{ span: 6 }}
										wrapperCol={{ span: 12 }}
										colon={false}
									>
										<Row>
											<Col span={18}>
												<Form.Item label={<span>资源名称</span>}>
													<span>街道信息</span>
												</Form.Item>
												<Form.Item label={<span>接口地址</span>}>
													<span>localhost:8080</span>
												</Form.Item>
												<Form.Item label={<span>接口地址</span>}>
													<span>******</span>
												</Form.Item>
											</Col>
											<Col span={6}>
												<Form.Item label={<span>请求方式</span>}>
													<span>GET</span>
												</Form.Item>
												<Form.Item label={<span>接口协议</span>}>
													<span>HTTP</span>
												</Form.Item>
												<Form.Item label={<span>数据格式</span>}>
													<span>JSON</span>
												</Form.Item>
											</Col>
										</Row>
									</Form>
									<div>
										<span>请求参数</span>
									</div>
									<Form>
										<Row>
											<Col span={4}>
												<Form.Item>
													<Dropdown overlay={menu1}>
														<Button>参数</Button>
													</Dropdown>
												</Form.Item>
											</Col>
											<Col span={4}>
												<Form.Item>
													<Dropdown overlay={menu2}>
														<Button>条件</Button>
													</Dropdown>
												</Form.Item>
											</Col>
											<Col span={6}>
												<Form.Item>
													<Dropdown overlay={menu3}>
														<Button>是否必填</Button>
													</Dropdown>
												</Form.Item>
											</Col>
											<Col span={4} style={{ paddingTop: '5px' }}>
												<MinusCircleOutlined />
												&nbsp;
												<PlusOutlined />
											</Col>
										</Row>
									</Form>
									<div>
										<span>请求示例</span>
									</div>
									<Input.TextArea />
									<div>
										<span>响应示例</span>
									</div>
									<Input.TextArea />
								</Content>
							</Layout>
						</Modal>
						<Modal
							title="接口访问-电子文件"
							visible={apiModal}
							onCancel={() => this.closeModalState('api')}
							bodyStyle={{ backgroundColor: '#f0f2f5', padding: '8px 24px' }}
							onOk={() => this.closeModalState('api')}
							destroyOnClose={true}
						>
							<Layout>
								<Content className="check-content">
									<div style={{ margin: '8px 0' }}>
										<Button>Json</Button>
										<Button>XML</Button>
									</div>
									<div>
										<span>基本信息</span>
									</div>
									<Form
										labelCol={{ span: 6 }}
										wrapperCol={{ span: 12 }}
										colon={false}
									>
										<Row>
											<Col span={18}>
												<Form.Item label={<span>资源名称</span>}>
													<span>街道信息</span>
												</Form.Item>
												<Form.Item label={<span>接口地址</span>}>
													<span>localhost:8080</span>
												</Form.Item>
												<Form.Item label={<span>接口地址</span>}>
													<span>******</span>
												</Form.Item>
											</Col>
											<Col span={6}>
												<Form.Item label={<span>请求方式</span>}>
													<span>GET</span>
												</Form.Item>
												<Form.Item label={<span>接口协议</span>}>
													<span>HTTP</span>
												</Form.Item>
												<Form.Item label={<span>数据格式</span>}>
													<span>JSON</span>
												</Form.Item>
											</Col>
										</Row>
									</Form>
									<div>
										<span>请求参数</span>
									</div>
									<Table columns={col2} dataSource={data2} pagination={false} />
									<div>
										<span>请求示例</span>
									</div>
									<Input.TextArea />
									<div>
										<span>响应示例</span>
									</div>
									<Input.TextArea />
								</Content>
							</Layout>
						</Modal>
					</Content>
					<Footer className="footer"></Footer>
				</Layout>
			</Content>
		)
	}
}
const mapStateToProps = (state) => ({})
const mapDispatchToProps = (dispatch) => ({})
export default connect(mapStateToProps, mapDispatchToProps)(Applied)
